<template>
  <div class="u-wrap" v-for="(item, key) in newFriendMaps" :key="'frd'+key">
    <p class="c-title">{{ key }}</p>
    <div class="u-list">
      <div class="user-item"
           v-for="(it, idx) in item"
           :key="'ul'+idx"
           @click="handleSelect(key, idx)"
           :class="it.selected ? 'user-active' : ''">
        <el-image :src="it.avatar" class="img-wrap"/>
        <div>{{ it.nickname }}</div>
      </div>
    </div>
    <div class="cus-divider"></div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs, watch} from 'vue';

export default defineComponent({
  name: 'ChatUserItem',
  props: {
    friendMap: {
      type: Object,
      default: () => {
      },
    },
  },
  setup(props, {emit}) {
    const state = reactive({
      newFriendMaps: {}
    });
    watch(() => props.friendMap,
        (newVal, oldVal) => {
          state.newFriendMaps = newVal;
        });
    const handleSelect = (_key, _idx) => {
      for (const key in state.newFriendMaps) {
        state.newFriendMaps[key].forEach(it => {
          it.selected = false;
        })
      }
      state.newFriendMaps[_key][_idx].selected = true;
      const _user = state.newFriendMaps[_key][_idx]
      emit('handle-select', _user);
    }
    return {
      ...toRefs(state),
      handleSelect
    };
  },
});
</script>


<style scoped lang="scss">
.u-wrap {
  padding: 0;
  width: 100%;

  .c-title {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    color: grey;
  }

  .user-item {
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    height: 56px;
    flex-direction: row;
    width: 100%;

    .img-wrap {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      margin-right: 10px;
    }

    .rt-wrap {
      width: 100%;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      p {
        padding: 2px 0;
      }
    }

    &:not(.user-active):hover {
      background-color: #e6e6e6;
    }
  }

  .user-active {
    background-color: #d2d2d2;
    font-weight: bold;
  }

  .cus-divider {
    margin-bottom: 10px;
    border-top: 1px solid #EFEFEF;
  }

}
</style>
